// 引入 react 依赖
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Dimensions, StyleSheet, Text, TouchableOpacity, View, Animated, InteractionManager } from 'react-native';

// 引入第三方依赖
import _ from 'lodash';
import Icon from 'react-native-vector-icons/dist/Ionicons';
import pureRender from 'pure-render-decorator';
import { RNCamera } from 'react-native-camera';
import { Actions } from 'react-native-router-flux';

// antd 按需加载
import { Tabs, Toast } from '@ant-design/react-native';

// 引入 处理数据 所需文件
import { } from './module/module.js'

// 引入样式
import Style from './style/style.js';

// 引入公用组件
import { Status, NavBar } from '../../components/index.js'

// 引入专用组件
import { } from './components/index.js'

// 引入工具包
import { ScreenWidth, ScreenHeight, getHeaderHeight } from '../../util/utils.js'

const px2dp = (num) => num

class QrCode extends Component {

  constructor(props) {
    super(props)
    this.state = {
      firstLoad: true,
      top: new Animated.Value(0),
      isSigned: false
    }
    /** object */
    this.resultUrl = null
    /** function */
    this.onBarCodeRead = this.onBarCodeRead.bind(this)
    this.interval = null
  }

  componentDidMount() {
    InteractionManager.runAfterInteractions(() => {
      // ...耗时较长的同步执行的任务...
    });
  }

  componentWillReceiveProps(nextProps) {
    if (!this.props.isFocused && nextProps.isFocused) {
      this.onFocus()
    }
    if (this.props.isFocused && !nextProps.isFocused) {
      this.onBlur()
    }
  }

  onFocus() {
    this.props.toggleTabBarAction(false)
    /** 获取视频、现场首页信息 */
    if (this.state.firstLoad) {
      this.setState({ firstLoad: false })
    }
    /** 定时器触发动画 */
    const that = this
    this.interval =
      setInterval(function () {
        Animated.timing(that.state.top, {
          toValue: 1,
          duration: 2200
        }).start(() => that.setState({ top: new Animated.Value(0) }))
      }, 2260)
  }

  onBlur() {
    /** 清除定时任务 */
    clearInterval(this.interval)
  }

  getQueryString(url, name) {
    url = url + "";
    regstr = "/(\\?|\\&)" + name + "=([^\\&]+)/";
    reg = eval(regstr);//eval可以将 regstr字符串转换为 正则表达式
    result = url.match(reg);//匹配的结果是：result[0]=?sid=22 result[1]=sid result[2]=22。所以下面我们返回result[2]

    if (result && result[2]) {
      return result[2];
    }
  }

  onBarCodeRead(e) {
    /** 避免多次提交 */
    if (!this.resultUrl || this.resultUrl !== e.data) {
      if (e.data.indexOf('http://hm.pay.huiming001.com/') !== 0) {
        Toast.info('请扫描正确的二维码', 1, null, false)
      } else {
        this.resultUrl = e.data
        const shopnum = this.getQueryString(e.data, 'shopnum')
        Actions.pay({ shopnum })
        // this.resultUrl = null
      }
    }
  }

  barcodeReceived(e) {
    console.log('Barcode: ' + e.data)
    console.log('Type: ' + e.type)
  }

  render() {

    return (
      <View style={{ flex: 1, flexDirection: 'column', }} >
        <View style={{}}>
          <Status />
          <NavBar
            title="扫码支付"
            back={true}
          />
        </View>
        <View
          style={{
            flex: 1
          }}>
          <RNCamera
            ref={(cam) => {
              this.camera = cam
            }}
            onBarCodeRead={this.onBarCodeRead.bind(this)}
            style={{ width: ScreenWidth, height: ScreenHeight, }}
          />
          <View style={{ position: 'absolute', left: 0, right: 0, top: 0, bottom: 0, flexDirection: 'column', }}>
            <View style={{ flex: 1, backgroundColor: 'black', opacity: 0.5 }} />
            <View style={{ flexDirection: 'row', height: 250, justifyContent: 'center', alignItems: 'center' }}>
              <View style={{ height: 250, width: (ScreenHeight - 250) / 2, backgroundColor: 'black', opacity: 0.5 }} />
              <View style={{ height: 250, width: 250 }} >
                <View style={{ position: 'absolute', left: 0, top: 0 }}>
                  <View style={{ height: 2, width: 30, backgroundColor: '#37b44a' }} />
                  <View style={{ height: 30, width: 2, backgroundColor: '#37b44a' }} />
                </View>
                <View style={{ position: 'absolute', right: 1, top: -1, transform: [{ rotate: '90deg' }] }}>
                  <View style={{ height: 2, width: 30, backgroundColor: '#37b44a' }} />
                  <View style={{ height: 30, width: 2, backgroundColor: '#37b44a' }} />
                </View>
                <View style={{ position: 'absolute', left: 1, bottom: -1, transform: [{ rotateZ: '-90deg' }] }}>
                  <View style={{ height: 2, width: 30, backgroundColor: '#37b44a' }} />
                  <View style={{ height: 30, width: 2, backgroundColor: '#37b44a' }} />
                </View>
                <View style={{ position: 'absolute', right: 0, bottom: 0, transform: [{ rotateZ: '180deg' }] }}>
                  <View style={{ height: 2, width: 30, backgroundColor: '#37b44a' }} />
                  <View style={{ height: 30, width: 2, backgroundColor: '#37b44a' }} />
                </View>
                <Animated.View style={{
                  width: 250,
                  height: 1,
                  backgroundColor: '#37b44a',
                  transform: [{
                    translateY: this.state.top.interpolate({
                      inputRange: [0, 1],
                      outputRange: [0, 250]
                    })
                  }]
                }} />
              </View>
              <View style={{ height: 250, width: (ScreenHeight - 250) / 2, backgroundColor: 'black', opacity: 0.5 }} />
            </View>
            <View style={{ flex: 1.5, backgroundColor: 'black', opacity: 0.5, alignItems: 'center' }} >
              <Text style={{ fontSize: 14, color: '#ccc', marginTop: 40 }}>将二维码放入框内，即可自动扫描</Text>
            </View>
          </View>
        </View>
      </View>
    );
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'column',
    backgroundColor: 'black'
  },
  preview: {
    flex: 1,
    justifyContent: 'flex-end',
    alignItems: 'center'
  },
  capture: {
    flex: 0,
    backgroundColor: '#fff',
    borderRadius: 5,
    padding: 15,
    paddingHorizontal: 20,
    alignSelf: 'center',
    margin: 20
  }
});

export default connect(state => ({
  user: state.user
}))(pureRender(QrCode))
